﻿@model IEnumerable<CustomerManagement.DataAccess.Customer>

@{
    ViewBag.Title = "Index";
}

<h4 class="lighter">
    <i class="icon-star orange"></i>
    List Customer
</h4>

<p>
    @Html.ActionLink("Create new", "CreatePartial", null, new { id = "btnCreate", @class = "btn btn-mini no-radius" })
</p>
<div id="customers">
        @Html.Partial("Customers")
    </div>
@*<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Phone)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CustomerType)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Area.District)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Phone)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CustomerType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Area.District)
            </td>
            <td>
                <div class="btn-group">
                    <a class="btn btn-mini btn-info" title="Edit" href="/Customer/EditPartial?customerId=@Html.DisplayFor(modelItem => item.ID)" id="btnEdit_@Html.DisplayFor(modelItem => item.ID)">
                        <i class="icon-edit bigger-125"></i>
                    </a>
                    <a class="btn btn-mini btn-yellow" title="Details">
                        <i class="icon-flag bigger-125"></i>
                    </a>
                    <a class="btn btn-mini btn-danger " title="Delete" href="/Customer/Delete/@Html.DisplayFor(modelItem => item.ID)" id="btnDelete_@Html.DisplayFor(modelItem=>item.ID)">
                        <i class="icon-trash bigger-125"></i>
                    </a>
                    @using CustomerManagement.Infrastructure
                    @Ajax.RawActionLink("<i class='icon-trash bigger-125'></i>", "test", "Customer", new { id = item.ID }, new AjaxOptions { HttpMethod = "Post", Confirm = "Are you sure you want to delete this customer?" }, new { @class = "btn btn-mini btn-danger" })
                </div>
            </td>
        </tr>
    }
</table>*@

<div id="dialogDiv" class='modal hide fade'>
</div>
<div id="delete-dialog" title="Confirmation">
    <p>Are you sure you want to delete this Customer?</p>
</div>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    function submitForm(element) {
        var result = confirm("Are you sure you wanna delete this Customer?");
        if (result) {
            var e = $(element);//element not element.id
            var form = e.parent('form').get(0);//.get(0) added
            form.submit();
        }
        else
            return false;
    };
    $(function () {
        $('.btn-close').click(function (e) {
            e.preventDefault();
            $(this).parent().parent().parent().fadeOut();
        });

        $("[id*='btnEdit']").on("click", function (event) {
            event.preventDefault();
            var clientId = $(this).attr("href");
            $.ajax({
                url: clientId,
                type: "GET",
            })
            .done(function (result) {
                //$("#dialogDiv").html(result).dialog();
                $("#dialogDiv").html(result);
                $("#dialogDiv").modal({ backdrop: 'static' })
                $('#dialogDiv').modal('show');
            });
        });

        $("#btnCreate").on("click", function (event) {
            event.preventDefault();
            var clientId = $(this).attr("href");
            $.ajax({
                url: clientId,
                type: "GET",
            })
            .done(function (result) {
                //$("#dialogDiv").html(result).dialog();
                $("#dialogDiv").html(result);
                $("#dialogDiv").modal({ backdrop: 'static' })
                $('#dialogDiv').modal('show');
            });
        });
        var deleteLinkObj;
        // delete Link
        $("[id*='btnDelete']").click(function () {
            deleteLinkObj = $(this);  //for future use
            $('#delete-dialog').dialog('open');
            return false; // prevents the default behaviour
        });

        $('#delete-dialog').dialog({
            autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
            buttons: {
                "Continue": function () {
                    $.post("/Customer/DeleteConfirmed/2", function (data) {  //Post to action
                        //if (data == '<%= Boolean.TrueString %>') {
                        //    deleteLinkObj.closest("tr").hide('fast'); //Hide Row
                        //    //(optional) Display Confirmation
                        //}
                        //else {
                        //    //(optional) Display Error
                        //}
                        alert("success");
                    });
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

        //$("[id*='btnDelete']").on("click", function (event) {
        //    event.preventDefault();
        //    var customerId = $(this).attr("id").toString().split('_')[1];

        //    var clientId = $(this).attr("href");
        //    $.post(clientId).done(function () {
        //        alert("success");
        //    }).fail(function () {
        //        alert("error");
        //    });
        //});
    });
</script>